<template>
  <div style="background-color: #f7f7f7;">
    <myNavbar title="京元宝充值"></myNavbar>
    <div class="cash-out">
      <div class="cash-main">
        <div class="cash-top">
          <text class="cash-top-text">充值到京元宝</text>
        </div>
        <div class="cash-bottom">
          <div class="cash-center">
            <div class="cash-data">
              <text class="cash-center-mark">¥ </text>
              <input class="cash-center-input" v-model="amount" name="input" type="digit" :maxlength="maxlength" @click="getInput"  placeholder="请输入充值金额" />
            </div>
          </div>
          <div class="submit_payMethod" >
            <div class="submit_payMethod_Header">
              <text class="submit_payMethod_Header_Title">支付方式</text>
            </div>
            <div class="submit_payMethod_Content" >
              <div>
                <div class="submit_payMethod_Content_Column_wrap">
                  <div class="submit_payMethod_Content_Column_image">
                    <image class="submit_payMethod_Content_Column_image" src="http://rzico.oss-cn-shenzhen.aliyuncs.com/img/zhifubao.png"></image>
                  </div>
                  <div class="submit_payMethod_Content_Title_wrap">
                    <text class="submit_payMethod_Content_Title">支付宝支付 </text>
                    <text class="submit_product_details_IntroductionTwo" style="margin-left:10px">单笔限额5000元</text>
                  </div>
                </div>
              </div>
              <switch style='zoom:0.7' :checked="paymentType == 'alipayPay'"  @click="changeClick('alipayPay')"/>
            </div>
            <div class="submit_payMethod_Content" >
              <div>
                <div class="submit_payMethod_Content_Column_wrap">
                  <div class="submit_payMethod_Content_Column_image">
                    <image class="submit_payMethod_Content_Column_image" src="http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/images/wxpayImg.png"></image>
                  </div>
                  <div class="submit_payMethod_Content_Title_wrap">
                    <text class="submit_payMethod_Content_Title">微信支付 </text>
                    <text class="submit_product_details_IntroductionTwo" style="margin-left:10px">单笔限额5000元</text>
                  </div>
                </div>
              </div>
              <switch style='zoom:0.7' :checked="paymentType == 'weixinAppPayPlugin'"  @click="changeClick('weixinAppPayPlugin')"/>
            </div>
          </div>
          <div class="cash-btn">
            <div class="cash-btn-button" type="primary" @click="paymentClick">
              <text class="cash-btn-button-text">充值</text>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
const eeui = app.requireModule('eeui');
import myNavbar from "../../../components/myNavbar/myNavbar.vue";
import { fillCard } from '../../../api/cardBill';
const pay = app.requireModule("eeui/pay");
import {submit,query} from '../../../api/payment';
export default {
  data(){
    return{
      amount1:'',
      paymentVo:[1,2,3],
      balance: 0,
      point: 0,
      amount: "",
      maxlength: 10,
      disabled: true,
      check:'',
      paymentType:'weixinAppPayPlugin',
    }
  },
  components: { myNavbar },
  created(){
  },
  methods:{
    getInput(e) {
      let amount = this.amount
      let maxlength = amount.indexOf('.') + 3 // 限制小数点后只能输入两位
      if (maxlength == 2) {
        maxlength = 10
      }
      // let disabled = util.isNull(amount)
    },
    wholeCashOut() {
      let amount = this.balance / 100
      this.disabled = false;
    },
    changeClick(data){
      this.paymentType = data
    },
    paymentClick(){
      var _this = this
      console.log(_this.amount)
      if(_this.amount<=0|| _this.amount == null ){
        eeui.toast('请输入充值金额')
        return;
      }
      fillCard({
        amount:_this.amount,
        cardType:0
      }).then(res=>{
        console.log(res)
        console.log("111111111111111112222222222222222222222222")
         if(this.paymentType=='weixinAppPayPlugin'){
          console.log('我进来微信支付了')
          _this.submitClick(res.data.sn)
        } else if(this.paymentType=='alipayPay'){
          console.log('我进来alipayPay')
          _this.submitClick(res.data.sn)
        }
      });
    },
    queryClick(data) {
      var _this = this
      query({
        sn: data
      }).then(res => {
        eeui.closePage()
        console.log(res)
      }).catch(error => {
        console.log(error.content)
        eeui.closePage()
      })
    },
    submitClick(data){
      var _this = this
      console.log(data)
      let paymentsn=data
      //微信支付
      if(this.paymentType=='weixinAppPayPlugin'){
        submit({
          paymentPluginId:'weixinAppPayPlugin',
          sn:data
        }).then(res=>{
          console.log('支付')
          console.log(res)
          if (res.type == 'success') {
            pay.weixin({
              appid: res.data.appid,
              partnerid: res.data.partnerid,
              prepayid: res.data.prepayid,
              package: res.data.package,
              noncestr: res.data.noncestr,
              timestamp: res.data.timestamp,
              sign: res.data.paySign,
            }, result => {
              console.log(result, '微信支付查看')
              if (result.status == 0) {
                // _this.queryClick(_this.sn)
                _this.queryClick(paymentsn)
                eeui.closePage()
              } else if (result.status == -1) {
                eeui.toast('服务器出错，请稍后重试')
                eeui.closePage()
                console.log('支付失败3')
              } else if (result.status == -2) {
                eeui.toast('您已取消支付')
                eeui.closePage()
                console.log('支付失败4')
              } else if (result.status == -999) {
                eeui.toast('开启微信失败')
                eeui.closePage()
                console.log('支付失败5')
              }
            })
          } else {
            eeui.toast('支付失败')
            console.log('支付失败6')
            eeui.closePage()
          }
        }).catch(error=>{
          console.log(error)
        })
      } else if(this.paymentType=='alipayPay'){
      //  支付宝支付
        submit({
          paymentPluginId: 'alipayAppPlugin',
          sn: data
        }).then(res => {
          console.log('支付')
          console.info(res)
          if (res.type == 'success') {
            pay.alipay(res.data.payData, result => {
              console.log(result, '支付宝支付查看')
              if (result.status == 9000) {
                _this.queryClick(paymentsn)
                eeui.closePage()
              }
              // else if (result.status == 4000 || result.status == 6002 || result.status == '其他') {
              //   eeui.toast('服务器出错，请稍后重试')
              //   eeui.closePage()
              //   eeui.openPage({
              //         pageName: 'componentsOrder',
              //         params: _this.orderId,
              //         url: 'root://pages/member/order/details.js',
              //         statusBarType: 'immersion',
              //         statusBarStyle: false
              //       },
              //       (result) => {
              //       }
              //   );
              //   console.log('支付失败3')
              // }
              // else if (result.status == 5000) {
              //   eeui.toast('重复请求')
              //   eeui.closePage()
              //   eeui.openPage({
              //         pageName: 'componentsOrder',
              //         params: _this.orderId,
              //         url: 'root://pages/member/order/details.js',
              //         statusBarType: 'immersion',
              //         statusBarStyle: false
              //       },
              //       (result) => {
              //       }
              //   );
              //   console.log('支付失败3')
              // }
              // else if (result.status == 6001) {
              //   eeui.toast('您已放弃支付')
              //   eeui.closePage()
              //   eeui.openPage({
              //         pageName: 'componentsOrder',
              //         params: _this.orderId,
              //         url: 'root://pages/member/order/details.js',
              //         statusBarType: 'immersion',
              //         statusBarStyle: false
              //       },
              //       (result) => {
              //       }
              //   );
              //   console.log('支付失败3')
              // }
              // else if (result.status == 8000 || result.status == 6004) {
              //   eeui.toast('查询出错，请刷新重试')
              //   eeui.closePage()
              //   eeui.openPage({
              //         pageName: 'componentsOrder',
              //         params: _this.orderId,
              //         url: 'root://pages/member/order/details.js',
              //         statusBarType: 'immersion',
              //         statusBarStyle: false
              //       },
              //       (result) => {
              //       }
              //   );
              //   console.log('支付失败3')
              // }
            })
          }
        }).catch(error => {
          eeui.toast('支付失败')
          eeui.closePage()
        })
      }
      },
    },
}
</script>

<style scoped>
.cash-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-top: 30px;
  padding-bottom: 30px;
}
.cash-btn-button {
  border-radius: 15px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 600px;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #00b43c;
}
.cash-btn-button-text{
  color: white;
  font-size: 32px;
}

input{
  background:none;
  outline:none;
  border:0px;
}


.cash-main {
  margin: 30px;
  background-color: #f7f7f7;
  border-radius: 14px;
}

.cash-top {
  padding: 40px;
  background-color: #fff;
  border-radius: 14px;
}
.cash-top-text{
  font-size: 30px;
  color: #555;
}


.cash-center{
  padding-top: 10px;
  background-color: #fff;
}

.cash-data {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 55px;
  padding: 30px 0;
}

.cash-center-mark {
  margin-left: 40px;
  margin-right: 40px;
  font-size: 42px;
}

.cash-center-input {
  background-color: #fff;
  flex: 1;
  min-height: 65px;
}



page {
  background-color: rgba(248, 248, 248, 0.8);
}



.submit_product_details_IntroductionTwo {
  font-size: 24px;
  line-height: 26px;
  color: rgba(231, 91, 83, 1);
}

.submit_payMethod {
  width: 690px;
  padding: 25px;
  box-sizing: border-box;
  margin-top: 30px;
  background-color: white;
  border-radius: 16px;
}

.submit_payMethod_Header_Title {
  font-size: 32px;
  font-weight: 400;
  color: rgba(26, 26, 30, 1);
}

.submit_payMethod_Content {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  margin-top: 50px;
}

.submit_payMethod_Content_Column {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.submit_payMethod_Content_Title {
  font-size: 28px;
  font-weight: 400;
  color: rgba(26, 26, 30, 1);
  display: block;
}
.submit_payMethod_Content_SubTitle_item{
  display:flex;
  flex-direction: row;
  margin: 10px 0 0 10px;
}
.submit_payMethod_Content_SubTitle_wrap{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.submit_payMethod_Content_SubTitle {
  font-size: 24px;
  font-weight: 400;
  color: rgba(231, 91, 83, 1);
  line-height: 36px;
  display: block;
}

.submit_payMethod_Content_Title_wrap{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.submit_payMethod_Content_Column_wrap{
  display: flex;
  flex-direction: row;
}

.submit_payMethod_Content_Column_image{
  margin-right: 10px;
  display: flex;
  flex-direction: row;
  width:48px;
  height:48px;
}
</style>


